<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>销售出库</h2>
        </div>
      </el-col>
    </el-row>

    <el-dialog
        :visible.sync="addProduct1"
        width="60%"
    >
      <!--      <AddProduct :movie-id="addProductId" v-if="addProduct2" ref="addProductRef"></AddProduct>-->
      <AddProduct :movie-id="addProductId" v-if="addProduct2" ref="addProductRef"></AddProduct>
    </el-dialog>


    <el-row>
      <el-col :span="12">
        <span>客户:</span>
        <el-select @change="searchSelect(clientValue)" v-model="clientValue" placeholder="请选择"
                   style="margin-left: 10px">
          <el-option
              v-for="item in clientOptions"
              :key="item.clientId"
              :label="item.clientName"
              :value="item.clientId">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="12">
        <span>销售员:{{ userName }}</span>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-col :span="3" class="labClass" style="margin-left: 30px">
        <div class="grid-content bg-purple" style="margin-top: 25px">
          送货地址：
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light" style="margin-top: 20px">
          <el-input v-model="address" placeholder="请输入内容" class="labClass"></el-input>
        </div>
      </el-col>

      <el-col :span="3" class="labClass" style="margin-left: 240px">
        <div class="grid-content bg-purple" style="margin-top: 25px">
          总金额：{{ sumMoney }}
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 100px">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table
              :data="tableData"
              highlight-current-row
              @current-change="handleCurrentChange"
              style="width: 100%">
            <el-table-column
                prop="stockBean.productBean.productName"
                label="商品名称"
                align="center">
            </el-table-column>
            <el-table-column
                prop="stockBean.productBean.productFirm"
                label="厂家"
                align="center">
            </el-table-column>
            <el-table-column
                prop="stockBean.number"
                label="现有库存"
                align="center">
            </el-table-column>
            <el-table-column
                prop="stockBean.productBean.productSell"
                label="建议销售价"
                align="center">
            </el-table-column>
            <el-table-column
                prop="number"
                label="采购数量"
                align="center">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.num"
                                 size="small"
                                 @change="handleChange(scope.row,scope.row.num)"
                                 :min="0"
                                 :max="99999"
                                 :controls="false">
                </el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 100px">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-button type="primary" plain @click="addProduct">添加商品</el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <el-button type="primary" plain @click="delProduct">移除商品</el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-button type="primary" plain @click="addStock">出库</el-button>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import AddProduct from "./addProduct";

export default {
  name: "salesOfOutbound",
  components: {AddProduct},
  data() {
    return {
      address: '',
      sumMoney: '',

      addProduct1: false,
      addProductId: 0,
      addProduct2: false,

      clientId: '',
      userId: '',

      tableData: [],
      currentRow: '',


      clientValue: '',
      clientOptions: [],

      userName: '',

      stockIdArray: [],
      number: [],
      money:[],
      thisNumber:[],
      productId:[]
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$axios.get('drp/cilent/findByAll').then(
          r => {
            this.clientOptions = r.data;
          }
      )
      let loginUser = sessionStorage.getItem("loginUser")
      if (sessionStorage.getItem("loginUser") != null) {
        this.userName = JSON.parse(loginUser).realName
        this.userId = JSON.parse(loginUser).userId
      }
    },
    searchSelect(value) {
      let sumMoney = 0
      console.log(value)
      this.clientId = value
      let params = {
        ClientId: this.clientId
      }
      this.$axios.get('drp/orderdetail/findByClientId', {params: params}).then(
          r => {
            this.tableData = r.data
            for (let i = 0; i < this.tableData.length; i++) {
              sumMoney += this.tableData[i].number * this.tableData[i].stockBean.productBean.productSell
            }
            this.sumMoney = sumMoney
          }
      )
    },
    handleChange(value, num) {
      console.log(value)
      let sumMoney = 0
      if (this.stockIdArray.length > 0) {
        for (let i = 0; i < this.stockIdArray.length; i++) {
          if (this.stockIdArray[i] === value.stockBean.stockId) {
            this.stockIdArray.splice(i, 1)
            this.number.splice(i, 1)
            this.money.splice(i,1)
            this.thisNumber.splice(i,1)
          }
        }
      }

      this.stockIdArray.push(value.stockBean.stockId)
      this.number.push(num)
      this.thisNumber.push(value.stockBean.number)
      this.money.push(value.stockBean.productBean.productSell)
      this.productId.push(value.stockBean.productBean.productId);

      for (let i = 0; i < this.number.length; i++) {
        console.log("-----")
        console.log(this.number[i])
        console.log(this.thisNumber[i])
        console.log("-----")
        if (this.number[i]>this.thisNumber[i]){
          this.$message.error("不能大于库存数量")
          this.searchSelect(this.clientId)
          return
        }else {
          let formData = new FormData()
          formData.append("ClientId", this.clientId)
          formData.append("StockId", value.stockBean.stockId)
          formData.append("number", num)
          this.$axios.post('drp/orderdetail/updateNumber', formData).then(
              r => {
                if (r.data == 'ok') {
                  sumMoney += this.number[i] * this.money[i]
                }
                this.sumMoney = sumMoney
              }
          )
        }
      }
    },
    handleCurrentChange(val) {
      this.currentRow = val
      console.log(val)
    },
    addStock() {
      if (this.clientId == '') {
        this.$message.warning("请选择一个客户")
        return
      }
      if (this.address==''){
        this.$message.warning("请输入送货地址")
        return;
      }
      let formData = new FormData()
      formData.append("stockBeanList", this.stockIdArray)
      formData.append("address",this.address)
      formData.append("money",this.money)
      formData.append("productId",this.productId)
      formData.append("number", this.number)
      formData.append("userId", this.userId)
      formData.append("clientId", this.clientId)
      formData.append("sumNumber",this.sumMoney)
      this.$axios.post('drp/stock/outStock', formData).then(
          r => {
            if (r.data == 'ok') {
              location.href = "/index"
            }
          }
      )
    },
    addProduct() {
      if (this.clientId == '') {
        this.$message.warning("请选择一个客户")
      } else {
        this.addProduct1 = true
        this.addProduct2 = true
        this.$nextTick(() => {
          console.log(this.clientId)
          this.$refs.addProductRef.newInit(this.clientId)
        })
      }
    },
    delProduct() {
      if (this.clientId == '') {
        this.$message.warning("请选择一个客户")
        return
      }
      if (this.currentRow == '') {
        this.$message.warning("请选择一个商品")
      } else {
        let formData = new FormData()
        formData.append("ClientId", this.clientId)
        formData.append("StockId", this.currentRow.stockBean.stockId)
        this.$axios.post('drp/orderdetail/delOrderDetail', formData).then(
            r => {
              if (r.data == 'ok') {
                location.href = '/index'
              }
            }
        )
      }
    },
    guanbi(){
      this.addProduct1=false
      this.addProduct2=false
    }
  }
}
</script>

<style scoped>

</style>